<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <div v-if="mounted">
      <FormRender
        ref="formRenderRef"
        :moduleId="moduleId"
        v-model="formData"
        v-model:config="formDef"
      />
    </div>
    <template #footer>
      <el-button type="warning" icon="circle-close" @click="close">
        关闭
      </el-button>
      <el-button
        v-if="type != 'module'"
        type="primary"
        icon="circle-close"
        @click="handleShowFormData"
      >
        表单数据
      </el-button>
      <el-button
        v-if="type != 'module'"
        type="success"
        icon="circle-check"
        @click="validateForm"
      >
        表单校验
      </el-button>
    </template>
    <CommonDialog
      v-model="formDataVisible"
      width="700px"
      title="表单数据"
      :border="false"
      :showFooterOk="false"
      ok-text="确认"
      cancel-text="关闭"
      @cancel="formDataVisible = false"
      @closed="formDataVisible = false"
    >
      <div class="json-container">
        <JsonEditorVue
          v-model="formData"
          language="zh-CN"
          currentMode="form"
          class="json-content"
        />
      </div>
    </CommonDialog>
  </el-dialog>
</template>
<script setup lang="ts" name="FormPreviewDialog">
import { cloneObject } from "@/utils/common";
import { useMessage } from "@/hooks/message";
import FormRender from "@/views/design/form/FormRender.vue";
import { parseWithString } from "@/utils/process";
import type { FormDesignerModel } from "@/views/design/form/FormComponentMixin";
import { provide, reactive, ref } from "vue";
import JsonEditorVue from "json-editor-vue3";

const props = defineProps({
  title: {
    type: String,
    default: "表单预览"
  },
  width: {
    type: String,
    default: "50%"
  },
  type: {
    type: String,
    default: "flow"
  },
  model: {
    type: Boolean,
    default: true
  }
});

const formRenderRef = ref(null);
const formDef = ref<FormDesignerModel>({
  conf: {
    labelPosition: "right", //标签位置
    labelWidth: 80, //标签宽度，
    size: "default"
  },
  components: []
});
const formData = ref(null);
const formDataVisible = ref(false);
const tableListRefs = ref<any>({});
const componentRefs = ref<any>({});
const moduleId = ref<string>();
const mounted = ref(false);
provide("tableListRefs", tableListRefs);
provide("componentRefs", componentRefs);

const state = reactive({
  dialogVisible: false,
  dialogTitle: props.title,
  formModel: {
    id: "",
    formName: "",
    formRemark: "",
    formStatus: "0",
    formInfo: ""
  }
});

const show = row => {
  state.dialogVisible = true;
  if (row && row.id) {
    moduleId.value = row.id;
    cloneObject(state.formModel, row);
    const formInfo = parseWithString(state.formModel.formInfo);
    if (formInfo.conf && formInfo.components) {
      formDef.value = formInfo;
    }
    mounted.value = true;
  }
};

const validateForm = () => {
  formRenderRef?.value.validateForm().then(valid => {
    if (valid) {
      useMessage().success("校验通过");
    } else {
      useMessage().error("校验失败");
    }
  });
};

const handleShowFormData = () => {
  formDataVisible.value = true;
};

const close = () => {
  state.formModel = {
    id: "",
    formName: "",
    formRemark: "",
    formStatus: "0",
    formInfo: ""
  };
  state.dialogVisible = false;
};

onUnmounted(() => {
  formData.value = null;
});

defineExpose({
  close,
  show,
  validateForm
});
</script>

<style lang="scss" scoped>
.json-container {
  width: 100%;
  height: 480px;

  .json-content {
    width: 100%;
    height: 95%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    //隐藏全屏按钮
    ::v-deep(.full-screen) {
      display: none !important;
    }
    //隐藏powderedby
    ::v-deep(.jsoneditor-poweredBy) {
      display: none !important;
    }
  }
}
</style>
